<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // //在js中ES6之前的函数都是放入执行栈里
        // function fn(){
        //     var res1 = '异步获取的数据，或者是不能马上有结果的数据'
        //     var res2 = res1 + '这里又是不能马上拿到结果的数据'
        //     var res3 = res2
        //     //简单来说，就是前面的结果拿到了才能执行后面的代码
        //     //这样就意味着我们需要在前面的结果拿到之前暂停，拿到结果后再执行后面的代码
        //     //我们需要实现函数的懒执行，此时Genrator就粉墨登场
        //     return res3
        // }

        // Generator 语法 function* fn(){}本质上就是函数的懒执行
        // function* fn(){
        //     yield 'html'
        //     yield 'css'
        //     yield 'js'
        //     return 'java'
        // }
        // const f = fn()//执行Generator函数，返回迭代器对象
        // console.log(f.next());
        // console.log(f.next([]));
        // console.log(f.next());
        // console.log(f.next());
        // console.log(f.next());


        // yieid有一个返回值，返回值是调用next方法传入的参数

        //Generator的简单应用，每次生成的字符做一个拼接
        function* fn(){
            const a = yield 'html'
            const b = yield a +',css'
            return b + ',js'
        }

        const f = fn()
        console.log(f.next());
        console.log(f.next(f.next().value));

        //async/await 是一个一部解决方案，底层基于Generator进行二次封装，返回的是Promise对象
        for (let v of fn()){
            console.log(v);
        }

        

    </script>
</body>
</html>